<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/vue-2.4.0.js"></script>
  </head>
  <body>
    <div id="app">
      <div>{{js}}</div>
      <button @click="begin" :disabled="isDisabled">开始</button>
      <button @click="timeOut" :disabled="!isDisabled">暂停</button>
      <button @click="resume">重新挑战</button>
    </div>
  </body>
  <script>
    let num = 0.0;
    let vm = new Vue({
      el: "#app",
      data: {
        js: "0.00",
        time: "",
      },
      methods: {
        begin() {
          this.isDisabled = !this.isDisabled;
          this.time = setInterval(() => {
            num += 0.01;
            this.js = num.toFixed(2);
          }, 10);
        },
        timeOut() {
          clearInterval(this.time);
          if (this.js == 10) {
            alert("你赢了");
          } else {
            alert("你输了");
          }
        },
        resume() {
          this.isDisabled = !this.isDisabled;
          num = 0;
          this.js = "0.00";
        },
      },
    });
  </script>
</html>
